Android 一步步实现曲线图、折线图、柱状图、雷达图，动态心跳图

2024-06-29 08:13| 来源: 网络整理| 查看: 265

本文目录正文1 MPandroidChart效果图2 本文实现的效果图2.1 其他开源图表项目 3 MPAndroidChart使用教程3.1 **引入依赖或导入module**3.2 在布局中定义3.3 显示坐标数据的marker3.4 Activity中初始化设置LineChart3.5 点击坐标轴任意值的回调3.6 图表填充数据3.7 阴影效果fade_red.xml 4 线条的四种不同效果实现4.1 线条支持的模式4.2 曲线图4.3 折线图4.4 柱状图 5 一键清空图标数据5.1 后端代码5.2 前端代码 6 轨迹线条属性6.1 虚线6.2 实线6.3 颜色 7 线条图示标属性7.1 颜色与形状7.2 形状参数介绍 8 图表背景、边框、网格线修改8.1 修改背景，去掉边框8.2 取消显示网格8.3 X Y轴值的自定义8.4 线条值的更改 9 单表多曲线10 使用MarkerView显示更多详情11 (MP高级进阶)实现动态心跳图

正文 1 MPandroidChart效果图

以下是四种典型的基于MP框架实现的曲线图

在这里插入图片描述

2 本文实现的效果图

在这里插入图片描述

2.1 其他开源图表项目 MPAndroidChart ★ 31.6K 安卓图表解决方案hellocharts-android ★ 7K Android图表库WilliamChart ★ 4.4K 在应用程序中实现图表的Android库GraphView ★ 2.5K 通过编程创建灵活好看的图表android-DecoView-charting ★ 958 实现高度可配置动画环形图表RadarChart ★ 350+ 自由定制旋转交互的Android雷达图 3 MPAndroidChart使用教程 3.1 引入依赖或导入module repositories { maven { url "https://jitpack.io" } } compile 'com.github.PhilJay:MPAndroidChart:v3.0.2' 3.2 在布局中定义 3.3 显示坐标数据的marker 3.4 Activity中初始化设置LineChart private LineChart chart; //设置 LineChart { chart = findViewById(R.id.chart1); //设置背景 chart.setBackgroundColor(Color.WHITE); //是否显示坐标数据 chart.getDescription().setEnabled(false); //是否支持双击 chart.setTouchEnabled(true); //值选中回调监听 chart.setOnChartValueSelectedListener(this); //是否绘制网格背景 chart.setDrawGridBackground(false); //显示坐标数据的box MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view); // Set the marker to the chart mv.setChartView(chart); chart.setMarker(mv); // enable scaling and dragging chart.setDragEnabled(true); chart.setScaleEnabled(true); // chart.setScaleXEnabled(true); // chart.setScaleYEnabled(true); // force pinch zoom along both axis chart.setPinchZoom(true); } //设置坐标轴轴线的粗细 XAxis xAxis; { // X-Axis Style // xAxis = chart.getXAxis(); // vertical grid lines xAxis.enableGridDashedLine(10f, 10f, 0f); } YAxis yAxis; { // // Y-Axis Style // // yAxis = chart.getAxisLeft(); // disable dual axis (only use LEFT axis) chart.getAxisRight().setEnabled(false); // horizontal grid lines yAxis.enableGridDashedLine(10f, 10f, 0f); // axis range yAxis.setAxisMaximum(200f); yAxis.setAxisMinimum(-50f); } { // // Create Limit Lines // // LimitLine llXAxis = new LimitLine(9f, "Index 10"); llXAxis.setLineWidth(4f); llXAxis.enableDashedLine(10f, 10f, 0f); llXAxis.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM); llXAxis.setTextSize(10f); llXAxis.setTypeface(tfRegular); // LimitLine ll1 = new LimitLine(150f, "Upper Limit"); ll1.setLineWidth(4f); ll1.enableDashedLine(10f, 10f, 0f); ll1.setLabelPosition(LimitLabelPosition.RIGHT_TOP); ll1.setTextSize(10f); ll1.setTypeface(tfRegular); LimitLine ll2 = new LimitLine(-30f, "Lower Limit"); ll2.setLineWidth(4f); ll2.enableDashedLine(10f, 10f, 0f); ll2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM); ll2.setTextSize(10f); ll2.setTypeface(tfRegular); // draw limit lines behind data instead of on top yAxis.setDrawLimitLinesBehindData(true); xAxis.setDrawLimitLinesBehindData(true); // add limit lines yAxis.addLimitLine(ll1); yAxis.addLimitLine(ll2); //xAxis.addLimitLine(llXAxis); // add data setData(45, 180); // draw points over time chart.animateX(1500); // get the legend (only possible after setting data) Legend l = chart.getLegend(); // draw legend entries as lines l.setForm(LegendForm.LINE); } 3.5 点击坐标轴任意值的回调

首先在初始化时设置回调监听 chart.setOnChartValueSelectedListener(this); 然后继承OnChartValueSelectedListener接口并重写以下方法

//******************OnChartValueSelectedListener 需要重写以下方法*****************// @Override public void onValueSelected(Entry e, Highlight h) { Log.i("Entry selected", e.toString()); Log.i("LOW HIGH", "low: " + chart.getLowestVisibleX() + ", high: " + chart.getHighestVisibleX()); Log.i("MIN MAX", "xMin: " + chart.getXChartMin() + ", xMax: " + chart.getXChartMax() + ", yMin: " + chart.getYChartMin() + ", yMax: " + chart.getYChartMax()); } @Override public void onNothingSelected() { Log.i("Nothing selected", "Nothing selected."); } //******************OnChartValueSelectedListener 需要重写以上方法*****************// 3.6 图表填充数据 private void setData(int count, float range) { ArrayList values = new ArrayList(); for (int i = 0; i set1 = (LineDataSet) chart.getData().getDataSetByIndex(0); set1.setValues(values); set1.notifyDataSetChanged(); chart.getData().notifyDataChanged(); chart.notifyDataSetChanged(); } else { // create a dataset and give it a type set1 = new LineDataSet(values, "DataSet 1"); set1.setDrawIcons(false); // draw dashed line set1.enableDashedLine(10f, 5f, 0f); // black lines and points set1.setColor(Color.BLACK); set1.setCircleColor(Color.BLACK); // line thickness and point size set1.setLineWidth(1f); set1.setCircleRadius(3f); // draw points as solid circles set1.setDrawCircleHole(false); // customize legend entry set1.setFormLineWidth(1f); set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f)); set1.setFormSize(15.f); // text size of values set1.setValueTextSize(9f); // draw selection line as dashed set1.enableDashedHighlightLine(10f, 5f, 0f); // set the filled area set1.setDrawFilled(true); set1.setFillFormatter(new IFillFormatter() { @Override public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) { return chart.getAxisLeft().getAxisMinimum(); } }); // set color of filled area if (Utils.getSDKInt() >= 18) { // drawables only supported on api level 18 and above Drawable drawable = ContextCompat.getDrawable(this, R.drawable.fade_red); set1.setFillDrawable(drawable); } else { set1.setFillColor(Color.BLACK); } ArrayList dataSets = new ArrayList(); dataSets.add(set1); // add the data sets // create a data object with the data sets LineData data = new LineData(dataSets); // set data chart.setData(data); } } 3.7 阴影效果fade_red.xml 4 线条的四种不同效果实现 4.1 线条支持的模式 public enum Mode { LINEAR, STEPPED, CUBIC_BEZIER, HORIZONTAL_BEZIER } 4.2 曲线图

在setData方法中配置LineDataSet的属性

LineDataSet set1; set1 = new LineDataSet(values, "照度"); set1.setMode(LineDataSet.Mode.CUBIC_BEZIER);

在这里插入图片描述

4.3 折线图

在setData方法中配置LineDataSet的属性

LineDataSet set1; set1 = new LineDataSet(values, "照度"); set1.setMode(LineDataSet.Mode.LINEAR);

在这里插入图片描述

4.4 柱状图

在setData方法中配置LineDataSet的属性

LineDataSet set1; set1 = new LineDataSet(values, "照度"); set1.setMode(LineDataSet.Mode.STEPPED);

在这里插入图片描述

5 一键清空图标数据 5.1 后端代码 tvDelete = findViewById(R.id.delete); tvDelete.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { values.clear(); chart.clearValues(); chart.notifyDataSetChanged(); } }); 5.2 前端代码 6 轨迹线条属性 6.1 虚线 // draw dashed line set1.enableDashedLine(10f, 3f, 0f);//参数1 虚线段长度参数2 虚线段间距 6.2 实线 set1.enableDashedLine(10f, 0f, 0f);//参数1 虚线段长度参数2 虚线段间距 6.3 颜色 // black lines and points set1.setColor(getResources().getColor(R.color.backgroup_yellow)); set1.setCircleColor(getResources().getColor(R.color.backgroup_yellow)); 7 线条图示标属性 7.1 颜色与形状 // get the legend (only possible after setting data) Legend chartLegend = chart.getLegend(); chartLegend.setTextColor(Color.WHITE); // draw legend entries as lines chartLegend.setForm(Legend.LegendForm.SQUARE); 7.2 形状参数介绍 public enum LegendForm { NONE,//无图 EMPTY,//无图但占据view位置 DEFAULT,//默认形状 SQUARE,//方形 CIRCLE,//⚪ LINE//线 } // public enum LegendHorizontalAlignment { LEFT, CENTER, RIGHT } public enum LegendVerticalAlignment { TOP, CENTER, BOTTOM } public enum LegendOrientation { HORIZONTAL, VERTICAL } public enum LegendDirection { LEFT_TO_RIGHT, RIGHT_TO_LEFT } 8 图表背景、边框、网格线修改 8.1 修改背景，去掉边框 lineChart.setBackgroundColor(Color.WHITE); //是否显示边界 lineChart.setDrawBorders(false); 8.2 取消显示网格 lineChart.setDrawGridBackground(false); xAxis.setDrawGridLines(false); rightYaxis.setDrawGridLines(false); leftYAxis.setDrawGridLines(true);

设置X Y轴网格线为虚线（实体线长度、间隔距离、偏移量：通常使用 0）

leftYAxis.enableGridDashedLine(10f, 10f, 0f); 8.3 X Y轴值的自定义

原理：重写值方法，返回自定义格式字体，例如300重写为300斤

xAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) { return value + "斤"; // todo 你自己的值显示方式 } }); 8.4 线条值的更改

原理：重写线条值方法，返回自定义格式字体，例如30重写为30%

lineDataSet.setValueFormatter(new IValueFormatter() { @Override public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) { return value + "%"; } }); 9 单表多曲线

一个LineDataSet就是一条曲线，需要两条曲线的时候在创建一个LineDataSet 添加进去即可，这里封装为一个方法

/** * 添加曲线 */ private void addLine(List yourBeanList, String name, int color) { List entries = new ArrayList(); for (int i = 0; i LightBean lightBean = ((MainActivity) getActivity()).getCurrentLightBean(); if (lightBean == null) { ToastUtil.showToastLong("请先连接设备"); return; } float val = 0; if ((this instanceof ManualColorTemperatureFragment)||(this instanceof AutoColorTemperatureFragment)){ val = lightBean.getColorTemperature(); if (maxColorTemperatureValue val = lightBean.getIllumination(); if (maxIlluuminanceValue //在UI线程操作动态刷新 set1.notifyDataSetChanged(); chart.getData().notifyDataChanged();//更新曲线图数据 chart.notifyDataSetChanged();//刷新表 chart.moveViewToX(pointCount);//更新X轴位置 }); /**************************************************************************/ setAvg(); if (this instanceof ManualColorTemperatureFragment) ((ManualFragment) getParentFragment()).addDataListView(); }

【本文地址】

公司简介

联系我们